<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        } 
        ul,ol,li{
            list-style: none;
        }
        h1{
            color: orangered
        }
        span{
            margin-left:150px ;
            color: #F03726

        }
        .sou{
            margin-TOP:50PX ;
            width: 100%;
            height: 150px;
            background: red;
            opacity: .8;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sou>.zhong{
            width: 50%;
            height: 25%;
            /* background-color: purple; */
            padding-left: 70px;
        }
        .sou>.zhong> input{
            width: 75%;
            height: 100%;
            border-radius: 10px;
            padding-left: 15px;
        }
        button{
            width: 70px;
            height: 40px;
        }
        div>ul{
            display: none;
            padding-left: 20px;
        }


    </style>
</head>
<body>
    <h1>京京易购</h1>
    <span>您想不到的我们这里都有……</span>
    <div class="sou">
        <div class="zhong">
            <input type="text" placeholder="请输入商品名称"> <button>搜索</button>
            <ul>
                <!-- <li>我是搜索结果</li>
                <li>我是搜索结果</li>
                <li>我是搜索结果</li>
                <li>我是搜索结果</li>
                <li>我是搜索结果</li>
                <li>我是搜索结果</li> -->
            </ul>
        </div>
    </div>
    <script>
        //获取 input标签对象
        const oIpt = document.querySelector('input');
        const oUl = document.querySelector('ul');

        //定义变量 存储  延时器序号编号
        let time = 0;

        //给 input标签  添加input事件
        oIpt.addEventListener('input' , function(){
            clearInterval(time);

            time = setTimeout(()=>{
                // console.log(111)
                //第一步 获取 事件对象
                const t = new Date();

                //获取 当前输入的关键词
                let keyword = this.value;

                //通过节点操作  创建一个  标签对象
                const s = document.createElement('script');


                //设定script 标签属性值
                //百度搜索栏数据接口
                //同时需要修改参数  关键词  时间戳  函数名称
                s.setAttribute('src',`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34268,34099,34224,34004,34073,34093,34094,22158&wd=${keyword}&req=2&csor=2&pwd=1&cb=fun&_=${t.getTime}`);  


                //将  script 标签  写入到body标签的最后
                document.body.appendChild(s);

                //执行结束 script标签 也就 没有作用了
                //可以删除 写入的script标签了
                document.body.removeChild(s)
            },3000)
        })

        //给input标签添加  blur事件
        //失去焦点是我 让  ul隐藏、
        oIpt.addEventListener('blur' , function(){
            oUl.style.display = 'none';
        })




       

        //要调用执行的函数  函数需要有 有一个形参
        //储存  后端程序  赋值的实参
        function fun(result){
            console.log(result);
            console.log(result.g)
        //如果  没有  搜索 结果
            if(result.g===undefined){
                oUl.style.display = 'none';
                return;
            }
            //有数据的时候  动态渲染生成页面内容
            //让ul显示
            oUl.style.display = 'block';

            //定义变量  储存  动态生成的 ul>li 标签
            let str = '';


            result.g.forEach(itme => {
                str +=`<li>${itme.q}</li>`
            });

            //将字符串 写入ul标签
            oUl.innerHTML = str;
        };
    </script>
</body>
</html>